亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

深入理解vue-router之keep-alive

 更新時間:2017年08月31日 11:30:44   作者:RoamIn  
本篇文章主要介紹了深入理解vue-router之keep-alive。keep-alive使被包含的組件保留狀態(tài),或避免重新渲染,有興趣的可以了解一下

本文基于 Vue2.0

keep-alive 簡介

keep-alive 是 Vue 內置的一個組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。

用法也很簡單:

<keep-alive>
 <component>
  <!-- 該組件將被緩存! -->
 </component>
</keep-alive>

props

  • include - 字符串或正則表達,只有匹配的組件會被緩存
  • exclude - 字符串或正則表達式,任何匹配的組件都不會被緩存
// 組件 a
export default {
 name: 'a',
 data () {
  return {}
 }
}
<keep-alive include="a">
 <component>
  <!-- name 為 a 的組件將被緩存! -->
 </component>
</keep-alive>可以保留它的狀態(tài)或避免重新渲染
<keep-alive exclude="a">
 <component>
  <!-- 除了 name 為 a 的組件都將被緩存! -->
 </component>
</keep-alive>可以保留它的狀態(tài)或避免重新渲染

遇見 vue-router

router-view 也是一個組件,如果直接被包在 keep-alive 里面,所有路徑匹配到的視圖組件都會被緩存:

<keep-alive>
  <router-view>
    <!-- 所有路徑匹配到的視圖組件都會被緩存! -->
  </router-view>
</keep-alive>

然而產品汪總是要改需求,攔都攔不住...

問題

如果只想 router-view 里面某個組件被緩存,怎么辦?

  • 使用 include/exclude
  • 增加 router.meta 屬性

使用 include/exclude

// 組件 a
export default {
 name: 'a',
 data () {
  return {}
 }
}
<keep-alive include="a">
  <router-view>
    <!-- 只有路徑匹配到的視圖 a 組件會被緩存! -->
  </router-view>
</keep-alive>

exclude 例子類似。

缺點:需要知道組件的 name,項目復雜的時候不是很好的選擇

增加 router.meta 屬性

// routes 配置
export default [
 {
  path: '/',
  name: 'home',
  component: Home,
  meta: {
   keepAlive: true // 需要被緩存
  }
 }, {
  path: '/:id',
  name: 'edit',
  component: Edit,
  meta: {
   keepAlive: false // 不需要被緩存
  }
 }
]
<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 這里是會被緩存的視圖組件,比如 Home! -->
  </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
  <!-- 這里是不被緩存的視圖組件,比如 Edit! -->
</router-view>

優(yōu)點:不需要例舉出需要被緩存組件名稱

【加鹽】使用 router.meta 拓展

假設這里有 3 個路由: A、B、C。

需求:

  • 默認顯示 A
  • B 跳到 A,A 不刷新
  • C 跳到 A,A 刷新

實現(xiàn)方式

在 A 路由里面設置 meta 屬性:

{
  path: '/',
  name: 'A',
  component: A,
  meta: {
    keepAlive: true // 需要被緩存
  }
}

在 B 組件里面設置 beforeRouteLeave:

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
     // 設置下一個路由的 meta
    to.meta.keepAlive = true; // 讓 A 緩存,即不刷新
    next();
  }
};

在 C 組件里面設置 beforeRouteLeave:

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    // 設置下一個路由的 meta
    to.meta.keepAlive = false; // 讓 A 不緩存,即刷新
    next();
  }
};

這樣便能實現(xiàn) B 回到 A,A 不刷新;而 C 回到 A 則刷新。

總結

路由大法不錯,不需要關心哪個頁面跳轉過來的,只要 router.go(-1) 就能回去,不需要額外參數(shù)。

然而在非單頁應用的時候,keep-alive 并不能有效的緩存了= =

參考

issues#811
vue#keep-alive
vue2.0 keep-alive最佳實踐

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 查看當前vue項目所需Node.js版本的方法

    查看當前vue項目所需Node.js版本的方法

    這篇文章主要大家介紹了查看當前vue項目所需Node.js版本的方法,文章通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
    2023-11-11
  • 解決vue-cli項目sourcemap因為文件重名導致的文件定位映射錯誤問題

    解決vue-cli項目sourcemap因為文件重名導致的文件定位映射錯誤問題

    這篇文章主要介紹了解決vue-cli項目sourcemap因為文件重名導致的文件定位映射錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • Vue 中頁面?zhèn)髦档亩喾N方式小結

    Vue 中頁面?zhèn)髦档亩喾N方式小結

    本文主要介紹了Vue 中頁面?zhèn)髦档亩喾N方式小結,主要包括路由傳參、Vuex 狀態(tài)管理、Props 屬性和事件傳遞數(shù)據(jù)這幾種,具有一定的參考價值,感興趣的可以了解一下
    2023-10-10
  • Vue中一個組件調用其他組件的方法詳解(非父子組件)

    Vue中一個組件調用其他組件的方法詳解(非父子組件)

    vue中最常見子父組件產值,大家一定都很熟悉,最近項目中碰到非父組件中調用子組件方法的問題,這篇文章主要給大家介紹了關于Vue中一個組件調用其他組件的方法(非父子組件),需要的朋友可以參考下
    2022-10-10
  • 在Vue中進行數(shù)據(jù)分頁的實現(xiàn)方法

    在Vue中進行數(shù)據(jù)分頁的實現(xiàn)方法

    在前端開發(fā)中,數(shù)據(jù)分頁是一個常見的需求,特別是當處理大量數(shù)據(jù)時,Vue作為一款流行的JavaScript框架,提供了強大的工具和生態(tài)系統(tǒng)來實現(xiàn)數(shù)據(jù)分頁,本文將介紹如何在Vue中進行數(shù)據(jù)分頁,以及如何設計一個通用的分頁組件,需要的朋友可以參考下
    2023-10-10
  • element-ui中el-cascader動態(tài)加載和默認值詳解

    element-ui中el-cascader動態(tài)加載和默認值詳解

    vue+elementUI項目中el-cascader級聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關于element-ui中el-cascader動態(tài)加載和默認值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-05-05
  • Vue實現(xiàn)剪貼板復制功能

    Vue實現(xiàn)剪貼板復制功能

    這篇文章主要介紹了Vue實現(xiàn)剪貼板復制功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)

    vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)

    這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • Vue實現(xiàn) 點擊顯示再點擊隱藏效果(點擊頁面空白區(qū)域也隱藏效果)

    Vue實現(xiàn) 點擊顯示再點擊隱藏效果(點擊頁面空白區(qū)域也隱藏效果)

    這篇文章主要介紹了Vue實現(xiàn) 點擊顯示 再點擊隱藏 點擊頁面空白區(qū)域也隱藏效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-01-01
  • 記錄vue項目中遇到的一點小問題

    記錄vue項目中遇到的一點小問題

    本文是腳本之家小編給大家收藏整理的關于vue項目中遇到的一點小問題,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05

最新評論